<template>                          
    <div class="home-nav">
        <div>
            <img src="@/assets/logo.png"  style="width: 80px;height: 55px;">
        </div>
        <div class="home-title">星晖启航线上平台</div>
        <div class="home-bar">
            <div class="home-bar-element"
             @click="Router.homePage":style="{'color':Router.home ? '#bfdbfe' : 'black' }">首页</div>
             <div class="home-bar-element" @click="Router.purchasePage"
            :style="{ 'color': Router.purchase ? '#bfdbfe' : 'black' }" >商城</div>
            <div class="home-bar-element"  @click="Router.dataPage"
                :style="{ 'color': Router.data ? '#bfdbfe' : 'black' }" >个人中心</div>
            <div class="home-bar-element"
             @click="Router.uploadPage":style="{'color':Router.upload ? '#bfdbfe' : 'black'}">上传课程</div>
            <div class="home-bar-element" @click="Router.openLogin" >登录</div>
            <div class="home-bar-element" @click="Router.openSign">注册</div>
        </div>
    </div>
   
    <div v-if="Router.showSign === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeSign" style="margin-left: 95%; background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>

 
  <div v-if="Router.showLogin === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeLogin" style="margin-left: 95%; background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>

    <div style="background-color: #dddddd;">
        <div class="course">
            <div class="course-title">小学</div>
            <div class="course-contain">
                <div class="column" @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">{{ information.name }}</div>
                    <div class="course-introduction">{{ information.stutes }}</div>
                    <div class="course-introduction">{{information.selectedOption }}</div>
                    <div class="join-div":style="{color:information.ing?'#FF8246':'gray'}">正在进行
                        <div style="margin-left: 40px;">{{ information.students }}人参与</div>
                    </div>
                </div>
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">未进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div":style="{color:information.ing?'#FF8246':'gray'}">正在进行
                        <div style="margin-left: 40px;">452人参与</div>
                    </div>
                </div>
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">未进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">未进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div style="background-color: #dddddd;">
        <div class="course">
            <div class="course-title">初中</div>
            <div class="course-contain">
                <div class="column" @click="router.push('/study')" >
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">未进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
                <div class="column" @click="router.push('/study')" > 
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div":style="{color:information.ing?'#FF8246':'gray'}">正在进行
                        <div style="margin-left: 40px;">5825人参与</div>
                    </div>
                </div>
                <div class="column" @click="router.push('/study')" >
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">未进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">未进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div":style="{color:information.ing?'#FF8246':'gray'}">正在进行
                        <div style="margin-left: 40px;">、1411人参与</div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div style="background-color: #dddddd;">
        <div class="course">
            <div class="course-title">高中</div>
            <div class="course-contain">
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
                <div class="column" @click="router.push('/study')" >
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div":style="{color:information.ing?'#FF8246':'gray'}">正在进行
                        <div style="margin-left: 40px;">5725人参与</div>
                    </div>
                </div>
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
                <div class="column" @click="router.push('/study')" >
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
                <div class="column"  @click="router.push('/study')">
                    <div><img src="@/assets/课程封面.png" class="course-img"></div>
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">免费 </div>
                    <div class="join-div":style="{color:information.ing?'#FF8246':'gray'}">正在进行
                        <div style="margin-left: 40px;">9686人参与</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</template>
<script setup>
import router from '@/router/index';
import {RouterData} from './home';
const{Router}=RouterData();
import { messageData } from '../upload/upload';
const {information}=messageData();

</script>
<style scoped>
@import './home.scss'
</style>